<template>
    <div v-if="!label.show || label.show({ data, type: 'detail', isPhone: false })" class="detail"
        :style="{ width: typeof label.width === 'number' ? label.width + 'px' : label.width }">
        <div class="title" :style="'min-width:' + label_width">{{ label.label }}:</div>
        <div style="min-width: 6px;"></div>
        <div style="padding-right:12px;word-break:break-all" v-if="(data instanceof Object)">
            <div v-if="label.hformatter" v-html="label.hformatter(label.prop, data, data[label.prop])">
            </div>
            <component v-else :is="render([prop, label])"></component>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { interForm } from "@b/model/base/type";
import { isVNode } from "vue";
import { h } from "vue";
let v: any = null;
interface prop {
    prop: string
    data: any
    label: interForm
    label_width?: string
}
const props = defineProps<prop>()
const render = (item: [string, interForm]) => {
    const data = props.data
    if (item[1].formatter) {
        v = item[1].formatter(item[0], data, data[item[1].prop])
        if (isVNode(v)) {
            return v
        } else {
            return h('div', {}, v)
        }
    } else {
        return h('div', {}, data[item[1].prop])
    }
}
</script>

<style scoped>
.detail {
    min-height: 32px;
    line-height: 32px;
}

.detail .title {
    white-space: nowrap;
}
</style>